<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<style>
    body{
        padding: 0 10%;
    }
    .title{
        text-align: center;
        font-weight: bold;
        font-size: x-large;
    }
    p{
        text-indent: 2em;
        line-height: 1.5em;
    }
    .author-img{
        height: 100px;
        width: 100px;
        float: left;
        margin-right: 1rem;
        shape-outside: margin-box;
    }
    .sub-title{
        text-decoration: underline;
        font-weight: bold;
        font-size: large;
    }
    .author-name{
        color: #19537D;
        font-weight: bold;
        font-size: large;
    }
    .btn-list{
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }
    .btn{
        display: inline-block;
        padding: 0.2rem 1rem;
        border: 1px skyblue solid;
        cursor: pointer;
    }
    
    table{
        border-collapse:collapse;
        margin: 10px;
    }
    th,td{
        border: solid 1px black;
    }
    .table{
        margin-top: 20px;
    }
</style>
<body>
    <div id="article-content">
        <div class="content" contenteditable="true">
            <div></div>
            <div class="title"> 《岳阳楼记》</div>
            <p>
                庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。
            </p>
            <p>
                予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？
            </p>
            <p>
                若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。
            </p>
            <p>
                至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。
            </p>
            <p>
                嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲，居庙堂之高则忧其民，处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶？其必曰“先天下之忧而忧，后天下之乐而乐”乎！噫！微斯人，吾谁与归？
            </p>
            <p>
                时六年九月十五日。
            </p>
        </div>
        <div>
            <div class="sub-title">译文</div>
            <p>
                庆历四年的春天，滕子京被降职到巴陵郡做太守。隔了一年，政治清明通达，人民安居和顺，各种荒废的事业都兴办起来了。于是重新修建岳阳楼，扩大它原有的规模，把唐代名家和当代人的诗赋刻在它上面。嘱托我写一篇文章来记述这件事情。我观看那巴陵郡的美好景色，全在洞庭湖上。衔接远山，吞没长江，流水浩浩荡荡，无边无际，一天里阴晴多变，气象千变万化。这就是岳阳楼的雄伟景象。前人的记述（已经）很详尽了。那么向北面通到巫峡，向南面直到潇水和湘水，降职的官吏和来往的诗人，大多在这里聚会，（他们)观赏自然景物而触发的感情大概会有所不同吧？像那阴雨连绵，接连几个月不放晴，寒风怒吼，浑浊的浪冲向天空；太阳和星星隐藏起光辉，山岳隐没了形体；商人和旅客（一译：行商和客商）不能通行，船桅倒下，船桨折断；傍晚天色昏暗，虎在长啸，猿在悲啼，（这时）登上这座楼，就会有一种离开国都、怀念家乡，担心人家说坏话、惧怕人家批评指责，满眼都是萧条的景象，感慨到了极点而悲伤的心情。到了春风和煦，阳光明媚的时候，湖面平静，没有惊涛骇浪，天色湖光相连，一片碧绿，广阔无际；沙洲上的鸥鸟，时而飞翔，时而停歇，美丽的鱼游来游去，岸上的香草和小洲上的兰花，草木茂盛，青翠欲滴。有时大片烟雾完全消散，皎洁的月光一泻千里，波动的光闪着金色，静静的月影像沉入水中的玉璧，渔夫的歌声在你唱我和地响起来，这种乐趣（真是）无穷无尽啊！（这时）登上这座楼，就会感到心胸开阔、心情愉快，光荣和屈辱一并忘了，端着酒杯，吹着微风，觉得喜气洋洋了。哎呀！我曾探求过古时仁人的心境，或者和这些人的行为两样的，为什么呢？（是由于）不因外物好坏，自己得失而或喜或悲。在朝廷上做官时，就为百姓担忧；不在朝廷做官而处在僻远的江湖中间就为国君忧虑。他进也忧虑，退也忧愁。既然这样，那么他们什么时候才会感到快乐呢？古仁人必定说：“先于天下人的忧去忧，晚于天下人的乐去乐。”呀。唉！如果没有这种人，我与谁一道归去呢？写于为庆历六年九月十五日。
            </p>
        </div>
        <div>
            <div class="sub-title">作者</div>
            <div>
                <img class="author-img" alt="" src="https://song.gushiwen.cn/authorImg/fanzhongyan.jpg"/>
                <div class="author-name">范仲淹</div>范仲淹（989年10月1日－1052年6月19日），字希文。祖籍邠州，后移居苏州吴县。北宋初年政治家、文学家。范仲淹幼年丧父，母亲改嫁长山朱氏，遂更名朱说。大中祥符八年（1015年），范仲淹苦读及第，授广德军司理参军。后历任兴化县令、秘阁校理、陈州通判、苏州知州等职，因秉公直言而屡遭贬斥。皇祐四年（1052年），改知颍州，在扶疾上任的途中逝世，年六十四。累赠太师、中书令兼尚书令、楚国公，谥号“文正”，世称范文正公。
            </div>
        </div>
        <div class="table">
            <div class="sub-title">测试表格</div>
            <table>
                <tr>
                    <th>th1</th>
                    <th>th2</th>
                    <th>th3</th>
                </tr>
                <tr>
                    <td>td11</td>
                    <td>td12</td>
                    <td>td13</td>
                </tr>
                <tr>
                    <td>td21</td>
                    <td>td22</td>
                    <td>td23</td>
                </tr>
                <tr>
                    <td>td31</td>
                    <td>td32</td>
                    <td>td33</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="btn-list">
        <span id="ouputBtn" class="btn" onclick="outputWord">导出</span>
    </div>
    <div>
        <input type="file" name="" id="inputFile">
    </div>
    <div id="ouputText"></div>
</body>
<script src="./saveAsWord.js"></script>
<script src="https://unpkg.com/mammoth@1.4.18/mammoth.browser.min.js"></script>
<script type="text/javascript">
    const ouputBtn = document.getElementById('ouputBtn');
    const ouputText = document.getElementById('ouputText');
    ouputBtn.addEventListener("click",()=>{
        outputWord();
    });
    function outputWord(){
        saveData('#article-content','岳阳楼记',(e)=>{
            ouputText.innerHTML=e;
        });
    }
    const inputFile = document.getElementById('inputFile');
    inputFile && inputFile.addEventListener("change",(e)=>{
        loadFile(e)
    })

    function changeImg(){
        const imgs = document.getElementsByTagName('img');
        for(let i=0;i<imgs.length;i++){
            const encodedUrl = encodeURIComponent(imgs[i].src);
            const proxyEndpoint = 'http://localhost:3000/proxy-image?url=';
            const proxyUrl = proxyEndpoint + encodedUrl;
            imgs[i].src = proxyUrl; 
        }
    }

    function loadFile(e,charSet = ''){
        let file = e.target.files[0];
        file = new Blob([file]);
        const reader=new FileReader(); 
        reader.readAsText(file,charSet||'utf-8');
        reader.onload=function(data) { 
            console.log('data',data);
            let bodyContent = data.target.result;
            try{
                let reg = /<html.*>(\n|\t|\r|.)*<\/html>/g;
                const res = data.target.result;
                bodyContent = res.match(reg)[0];
            }catch(err){

            }
            const reg1 = /charset=(([0-9]|[a-z]|\-)+)/g;
            const charset = bodyContent.match(reg1);
            let type = 'utf-8';
            if(charset){
                type = charset[0].split('=')[1]||'utf-8';
            }
            if(charSet == '' && type != 'utf-8'){
                loadFile(e,type);
                return;
            }
            try{
                bodyContent = bodyContent.replace(/(<body)|(<html)/g,'<div');
                bodyContent = bodyContent.replace(/(<\\body)|(<\\html)/g,'<\div>');
            }catch(err){

            }
            const ouputText = document.getElementById('ouputText');
            ouputText.innerHTML = bodyContent;
        }
    }
</script>
</html>